<template>
    <div class="alertDemo">
        <div class="shortAlert">
            <el-alert title="消息提示的文案" type="info" show-icon> </el-alert>
            <el-alert title="成功提示的文案" type="success" close-text="详情" @close="details()" show-icon> </el-alert>
            <el-alert title="警告提示的文案" type="warning" close-text="详情" @close="details()" show-icon> </el-alert>
            <el-alert title="错误提示的文案" type="error" close-text="详情" @close="details()" show-icon> </el-alert>
            <el-alert title="消息提示的文案" type="info" close-text="详情" @close="details()" show-icon> </el-alert>
        </div>
        <div class="longAlert">
            <el-alert title="消息提示的文案" type="info" description="文字说明文字说明文字说明文字说明文字说明文字说明" @close="details()" close-text="详情" show-icon> </el-alert>
            <el-alert title="成功提示的文案" type="success" description="文字说明文字说明文字说明文字说明文字说明文字说明" show-icon> </el-alert>
            <el-alert title="消息提示的文案" type="info" description="文字说明文字说明文字说明文字说明文字说明文字说明" show-icon> </el-alert>
            <el-alert title="警告提示的文案" type="warning" description="文字说明文字说明文字说明文字说明文字说明文字说明" @close="details()" close-text="详情" show-icon>
            </el-alert>
            <el-alert title="错误提示的文案" type="error" description="文字说明文字说明文字说明文字说明文字说明文字说明" show-icon> </el-alert>
        </div>
    </div>
</template>

<script>
export default {
    name: 'alertDemo',
    methods: {
        details() {
            alert('跳转到详情页')
            // this.$router.push({ path: ""})
        }
    }
}
</script>
<style lang="scss" scoped>
.el-alert ::v-deep {
    margin-bottom: 10px;
}
</style>
